<template>
	<view class="gy-loadmore">
		<view class="gy-loadmorgy-line" :style="{borderBottom: `1rpx ${ props.dashed ? 'dashed' : 'solid' } ${ props.lineColor }`}"></view>
		<view v-if="props.loading" class="gy-loadmorgy-text" :style="{color: props.textColor}">
			<com-loading-icon /><text class="text-ellipsis">{{ props.loadingText }}</text>
		</view>
		<view v-else class="gy-loadmorgy-text" :style="{color: props.textColor}">{{ props.nomoreText }}</view>
		<view class="gy-loadmorgy-line" :style="{borderBottom: `1rpx ${ props.dashed ? 'dashed' : 'solid' } ${ props.lineColor }`}"></view>
	</view>
</template>

<script lang="ts" setup>

    const props = defineProps({
        dashed: {
        	type: Boolean,
        	default: false
        },
        loading: {
        	type: Boolean,
        	default: true
        },
        loadingText: {
        	type: String,
        	default: "加载中，请稍后"
        },
        nomoreText: {
        	type: String,
        	default: "没有更多"
        },
        textColor: {
        	type: String,
        	default: "#b3b3b3"
        },
        lineColor: {
        	type: String,
        	default: "#e3e3e3"
        }
    });
</script>

<style lang="scss" scoped>
	.gy-loadmore{
	    @include flex-center-center;
	    margin: var(--gy-gap);
	    .gy-loadmorgy-line{
	        flex: 1 1 0%;
	    }
	    .gy-loadmorgy-text{
	        @include flex-center-center;
	        max-width: 80%;
	        margin: 0 20rpx;
	        font-size: 28rpx;
	        text{
	            padding-left: 10rpx;
	            font-size: 28rpx;
	        }
	    }
	}

</style>
